<template>
<div  >
<div class="beijing">

    <div class="cover">

           <span>
          <el-avatar :src="cover"  :size="100"></el-avatar>
        </span>
    </div>
     
    
      <!-- <span v-for="(item, i) in navList" :key="i" >
      {{ item }}
      </span> -->
      <div class="dingdan"> 
        <el-button type="primary" round @click="clickorder" >订单查询</el-button>
      </div>
      <div class="addvip">
        <el-button type="primary" round @click="addvip">充值会员</el-button>
      </div>
      <order ref="ord"></order>
      <addvip ref="vip"></addvip>
    </div>
      </div>
</template>  
<script>
import Order from "../library/Order.vue"
import Addvip from './Addvip.vue';
export default {
    name: 'Personalpage',
    data() {
        return {
            navList: [
               
            
            ],
            cover: "",
        }
    },
 mounted: function () {
    
     this.getcover();
     this.getbooks();
    
    },
  components:{Order,Addvip,},
    methods: {
        getcover() {
      this.$axios.get("/getcover").then((resp) => {
        this.cover = resp.data;
        console.log("personalpage"+resp.data);
      });
        },
        getbooks() {
            this.$axios.get("/getbooks").then((resp) => {
                this.navList = resp.data;
            });
        },
        clickorder() {
            this.$refs.ord.dialogVisible = true
            console.log(9999999999999);
        },
        addvip() { 
            this.$refs.vip.dialogVisible=true
        }
        
    }
}
</script>
<style scoped>
.cover{
    position: absolute;
    margin-left: 46px;
    margin-top: 20px;
}
.dingdan{
    position: absolute;
    margin-top: 135px;
    margin-left: 48px;
}
.addvip{
    position: absolute;
    margin-top: 195px;
    margin-left: 48px;
}
.beijing{
    width: 100%;
    height: 860px;
    background-image: url('../../assets/shudianbeijing.jpg');
    background-size: cover;
}

</style>